<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
      content="
          height=160.0,
          initial-scale=1.0
          " />
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['gauge']});
    </script>
    <script type="text/javascript">
      function draw() {
        // Create and populate the data table.
        var data = google.visualization.arrayToDataTable([
          ['velicina', 'hodnota'],
          ['', 5.0],
        ]);
      
      var options = {
        min: 0.0,
        max: 5.0,
        greenFrom: 0.0,
        greenTo: 2.0,
        yellowFrom: 2.0,
        yellowTo: 4.0,
        redFrom: 4.0,
        redTo: 5.0
      };
        // Create and draw the visualization.
      var chart = new google.visualization.Gauge(document.getElementById('chart'));
      google.visualization.events.addListener(chart, "ready", function() {
      		CallbackListener.ready();
      	});
      
      chart.draw(data, options);
      
      }

      google.setOnLoadCallback(draw);
    </script>
  </head>
  <body>
    <div id="chart" style="width: 100%; height: 100%;"></div>
  </body>
</html>